<template>
  <div class="auth-container">
    <el-card class="auth-card entries-card">
      <template #header>
        <div class="card-header">
          <h2>成长日志</h2>
          <p class="subtitle">记录你的文字、图片、音频与心情</p>
        </div>
      </template>

      <div class="toolbar">
        <el-input v-model="q" placeholder="搜索标题或内容..." clearable size="large" class="toolbar-item" />
        <el-select v-model="visibility" placeholder="可见范围" clearable size="large" class="toolbar-item">
          <el-option label="私有" value="private" />
          <el-option label="仅好友" value="friends" />
          <el-option label="公开" value="public" />
        </el-select>
        <el-button type="primary" class="toolbar-item" size="large" @click="goNew">新建日志</el-button>
      </div>

      <el-empty v-if="filtered.length === 0" description="暂无日志，点击右上角新建吧" />
      <el-row v-else :gutter="16">
        <el-col v-for="item in filtered" :key="item.id" :xs="24" :sm="12" :md="8">
          <el-card class="entry-card" shadow="hover">
            <div class="entry-header">
              <div class="title">{{ item.title || '未命名' }}</div>
              <el-tag size="small" type="warning">{{ item.visibility }}</el-tag>
            </div>
            <div class="meta">{{ fmt(item.created_at) }}</div>
            <div class="content-preview">{{ item.content?.slice(0, 120) || '—' }}</div>
            <div class="tags">
              <el-tag v-for="t in (item.tags || [])" :key="t" size="small" class="tag">#{{ t }}</el-tag>
            </div>
            <div class="actions">
              <el-button text type="primary" @click="open(item.id)">查看</el-button>
              <el-button text type="info" @click="edit(item.id)">编辑</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { on } from 'events'
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useEntriesStore } from '@/stores/entries'
import { useUserStore } from '@/stores/auth/user.ts'

const router = useRouter()
const q = ref('')
const visibility = ref<string | null>(null)
const userStore = useUserStore()
type Entry = {
  id: number
  title?: string
  content?: string
  tags?: string[]
  visibility: 'private' | 'friends' | 'public'
  created_at: string
}

// 临时本地数据（可替换为真实 API）
const items = ref<Entry[]>([])

const filtered = computed(() => {
  return items.value.filter(e => {
    const okQ = q.value ? (e.title?.includes(q.value) || e.content?.includes(q.value)) : true
    const okV = visibility.value ? (e.visibility === visibility.value) : true
    return okQ && okV
  })
})

const entriesStore = useEntriesStore()

onMounted(async () => {
  try {
    console.log(1)
    const { list } = await entriesStore.fetch({ userId: userStore.user?.id || 0, title: q.value })
    // 将 store 数据投影到本地 items，满足当前视图字段
    items.value = list as unknown as Entry[]
  } catch (e) {
    // 静默失败，页面会显示空状态
    console.debug('[entries] fetch failed', e)
  }
})



function fmt(s: string) { return new Date(s).toLocaleString() }
function goNew() { router.push('/entries/new') }
function open(id: number) { router.push(`/entries/${id}`) }
function edit(id: number) { router.push(`/entries/${id}/edit`) }
</script>

<style scoped>
.entries-card { max-width: 1200px; margin: 40px auto; }
.subtitle { margin: 6px 0 0; font-size: 14px; color: #8a6f5b; }
.toolbar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar-item { min-width: 220px; }
.entry-card { margin-bottom: 16px; background: #fffaf6; }
.entry-header { display: flex; justify-content: space-between; align-items: center; }
.title { font-weight: 600; color: #3d2b20; }
.meta { color: #8a6f5b; font-size: 12px; margin: 6px 0; }
.content-preview { color: #5a3e2b; min-height: 40px; }
.tags { margin-top: 8px; }
.tag { margin-right: 6px; }
.actions { margin-top: 8px; display: flex; gap: 8px; }
</style>